<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="visible"
      width="800px"
    >
      <!--高级查询-->
      <div class="filter_container">
        <div class="filter_row">
          <el-form ref="form" :model="params" :inline="true" label-width="100px" size="mini">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="货主编码：">
                  <el-input v-model="params.id" @keyup.enter.native="handleFilter" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="货主名称：">
                  <el-input v-model="params.customerName" @keyup.enter.native="handleFilter" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!--操作按钮-->
      <div class="operation_container">
        <ul>
          <li><el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button></li>
        </ul>
      </div>
      <!--栅格-->
      <div>
        <el-table
          ref="singleTable"
          v-loading="grid.loading"
          :data="page.rows"
          element-loading-text="Loading"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column fixed align="center" label="序" width="50">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed prop="id" label="货主编码" align="center" show-overflow-tooltip />
          <el-table-column fixed prop="customerName" label="货主名称" align="center" show-overflow-tooltip />
          <el-table-column label="操作" align="center" fixed="right" width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-finished" circle @click="handleSelected(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div>
        <el-pagination
          v-show="page.total > 0"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          :total="page.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>


import BasicSpuApi from '@/api/goods/BasicSpuApi'

export default {

  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '云仓产品选择器',
      selects: {},
      params: {},
      page: {
        currentPage: appConfig.page.currentPage,
        pageSize: appConfig.page.pageSize,
        pageSizes: appConfig.page.pageSizes,
        total: null,
        rows: null
      },
      grid: {
        loading: true
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.grid.loading = true
      BasicSpuApi.page(this.params, this.page).then(response => {
        this.page.total = response.data.total
        this.page.rows = response.data.rows
        this.grid.loading = false
      }, () => {
        this.grid.loading = false
      })
    },
    handleFilter() {
      this.page.currentPage = appConfig.page.currentPage
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.loadData()
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage
      this.loadData()
    },
    handleSelected(row) {
      this.$emit('selected', row)
      this.handleClose()
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  // 高级查询
  .filter_container {
    padding-bottom: 0;
    .filter_row {
      .el-row {
        .el-col {
          .el-form-item{
            margin-bottom: 0;
          }
        }
      }
    }
  }
  // 操作按钮
  .operation_container {
    ul {
      margin-top: 0;
      li {
        float: right;
        list-style: none;
        padding-right: 2px;
        button {
          margin-bottom: 4px;
        }
      }
    }
  }
</style>
